<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../common/reset.css">
    <style>
        @keyframes momo {
            0% {
                top: 0;
            }
            100% {
                top: -1.1px;
            }
        }
        
        .box {
            position: relative;
            margin: 20px;
            display: flex;
            width: 300px;
            justify-content: space-between;
        }
        /* 字体向上平移 */
        
        .wrap:hover {
            position: relative;
            cursor: pointer;
            animation: momo .2s linear backwards;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li class="wrap"><span>首页</span></li>
        <li class="wrap"><span>番剧</span></li>
        <li class="wrap"><span>直播</span></li>
        <li class="wrap"><span>游戏中心</span></li>
        <li class="wrap"><span>会员购</span></li>
        <li class="wrap"><span>漫画</span></li>
        <li class="wrap"><span>赛事</span></li>
    </ul>
</body>

</html>